<template>
	<view>
		<!-- 仅出现在 百度 平台下的代码 -->
		<!-- #ifdef MP-BAIDU -->
		<view class="btn-list" :style="'margin:' + set.margin + 'px 0;'">
			<div v-for="list in set.data" @click="effect(list.url)"  v-if="list.url!='kefu'"
			 :style="'width:' + list.width + '%;height:' + chooseHeight(list.size) + 'px;margin: 0;' + 'margin:' + list.margin + 'px 0;'">
			        <!--  非自定义按钮,不是镂空  -->
			        <div class="moxi_box_" :class="list.type == 'info' ? 'info' : list.type == 'primary' ? 'primary' : list.type == 'error' ? 'error' : list.type == 'warning' ? 'warning' : 'success'" :style="'border-radius:' + (list.shape != 'square' ? '9999px' : '5px')" v-if="list.plain == 0&&list.type != 'custom'">
			            <div style="display: inline-block">{{list.title}}</div>
			        </div>
			
			        <!--  非自定义按钮,是镂空不是默认按钮  -->
			        <div class="moxi_box_" :style="'background: #fff;border: 1px solid' + chooseBGColor(list.type) + ';color:' + chooseColor(list.type) + ';border-radius:' + (list.shape != 'square' ? '9999px' : '5px') " v-if="list.plain != 0&&list.type != 'custom'&&list.type != 'info'">
			            <div style="display: inline-block">{{list.title}}</div>
			        </div>
			
			        <!--  非自定义按钮,即是镂空又是默认按钮  -->
			        <div class="moxi_box_" :style="'background: #fff;border: 1px solid #ebedf0;color:' + chooseColor(list.type) + ';border-radius:' + (list.shape != 'square' ? '9999px' : '5px') " v-if="list.plain != 0&&list.type != 'custom'&&list.type == 'info'">
			            <div style="display: inline-block">{{list.title}}</div>
			        </div>
			
			        <!--  自定义按钮,不是镂空  -->
			        <div class="moxi_box_" :style="'background:' + changeColor(list.bgcolor, list.gradual_direction, list.plain) + ';color: #fff;border-radius:' + (list.shape != 'square' ? '9999px' : '5px') " v-if="list.plain == 0&&list.type == 'custom'">
			            <div style="display: inline-block">{{list.title}}</div>
			        </div>
			
			        <!--  自定义按钮,是镂空  -->
			        <div class="moxi_box_" :style="'background: #fff;border: 1px solid' + list.bgcolor[0] + ';color:' + list.bgcolor[0] + ';border-radius:' + (list.shape != 'square' ? '9999px' : '5px') " v-if="list.plain != 0&&list.type == 'custom'">
			            <div style="display: inline-block">{{list.title}}</div>
			        </div>
			    </div>
		</view>
		<!-- #endif -->

		<!-- 除了 百度 平台，其它平台均存在的代码 -->
		<!-- #ifndef MP-BAIDU -->
		<view class="btn-list" :style="'margin:' + set.margin + 'px 0;'">
			<view v-for="list in set.data" v-if="app_type=='weixin'||list.url!='kefu'"
				:style="'width:' + list.width + '%;margin: 0;' + 'margin:' + list.margin + 'px 0;'"
				@click="effect(list.url)">
				<u-button :text="list.title" :type="list.type" :shape="list.shape" :openType="list.url=='kefu'?'contact':''"
					:plain="list.plain == 0 ? false : true" :size="list.size"
					:color="list.type == 'custom' ? changeColor(list.bgcolor, list.gradual_direction, list.plain) : ''"></u-button>
			</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	import list from '../../uni_modules/uview-ui/libs/config/props/list';
	export default {
		name: "diy_button",
		data() {
			return {
			
		app_type:""
			};
		},
		props: {
			set: {
				type: Object,
				default () {
					return {
						margin: "",
						data: [],
					}
				}
			}
		},
		created() {
			
			this.app_type = this.moxiConfig('appType')
		
		},
		methods: {
			cc(){
				this.msg("dwdww23")
			},
			changeColor(arr, direction, plain) {
				if (plain == 0) {
					if (arr.length == 1) {
						return arr[0]
					} else {
						let str = ''
						for (let i = 0; i < arr.length; i++) {
							str += ', ' + arr[i]
						}
						let newStr = 'linear-gradient(to ' + direction + ', ' + str.slice(2) + ')'
						return newStr
					}
				} else {
					return arr[0]
				}
			},
			effect(url) {
				if(url!='kefu'){
					this.navto(url)
				}
			},
			chooseHeight(size) {
				if (size == 'mini') {
					return 22
				} else if (size == 'small') {
					return 30
				} else if (size == 'large') {
					return 50
				} else {
					return 40
				}
			},
			chooseColor(size) {
				if (size == 'info') {
					return '#000000'
				} else if (size == 'primary') {
					return '#3c9cff'
				} else if (size == 'error') {
					return '#f56c6c'
				} else if (size == 'warning') {
					return '#f9ae3d'
				} else {
					return '#5ac725'
				}
			},
			chooseBGColor(size) {
				if (size == 'info') {
					return '#ffffff'
				} else if (size == 'primary') {
					return '#3c9cff'
				} else if (size == 'error') {
					return '#f56c6c'
				} else if (size == 'warning') {
					return '#f9ae3d'
				} else {
					return '#5ac725'
				}
			}
		}
	}
</script>

<style scoped>
	.uni-button {
		margin: 0;
	}

	.btn-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.diy-button {
		padding: 4px 12px;
	}

	.moxi_box_ {
		text-align: center;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center
	}

	.info {
		background: #fff;
		border: 1px solid #ebedf0;
		color: #000
	}

	.primary {
		background: #3c9cff;
		border: 1px solid #3c9cff;
		color: #ffffff
	}

	.error {
		background: #f56c6c;
		border: 1px solid #f56c6c;
		color: #ffffff
	}

	.warning {
		background: #f9ae3d;
		border: 1px solid #f9ae3d;
		color: #ffffff
	}

	.success {
		background: #5ac725;
		border: 1px solid #5ac725;
		color: #ffffff
	}
</style>